import React, { useState } from 'react';
import { Layout, Flex, Dropdown, Space, theme, Button } from 'antd';
import { Outlet } from 'react-router-dom';
import MainMenu from './components/Menu';
import MainBreadcrumb from './components/Breadcrumb';
import type { MenuProps } from 'antd';
import { UserOutlined, SkinOutlined, BellOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import ThemeConfig from './components/ThemeConfig';
import { useRecoilState } from 'recoil';
import { userSelector } from '@/store/user';
import './index.scss';

const { Header, Content, Footer, Sider } = Layout;
const { useToken } = theme;

const items: MenuProps['items'] = [
    {
        key: 'userInfo',
        label: '个人信息',
    },
    {
        key: 'logout',
        label: '退出登录',
    },
];
const Home: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const [open, setOpen] = useState(false);
    const navigate = useNavigate();
    const [userInfo, setUserInfo] = useRecoilState(userSelector);
    const onClick: MenuProps['onClick'] = ({ key }) => {
        if (key === 'logout') {
            setUserInfo(null);
            navigate('/');
        }
    };
    const { token } = useToken();
    return (
        <Layout className="home_layout">
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <div className="home_logo" />
                <MainMenu />
            </Sider>
            <Layout>
                <Header
                    className="home-header"
                    style={{
                        backgroundColor: token.colorBgBase,
                    }}
                >
                    <Flex justify="space-between">
                        <MainBreadcrumb />
                        <Flex align="center">
                            <Button type="link">
                                <BellOutlined />
                            </Button>
                            <Button type="link" onClick={() => setOpen(true)}>
                                <SkinOutlined />
                            </Button>
                            <Dropdown menu={{ items, onClick }}>
                                <Button type="link">
                                    <Space>
                                        <UserOutlined />
                                        <div>{userInfo.username}</div>
                                    </Space>
                                </Button>
                            </Dropdown>
                        </Flex>
                    </Flex>
                </Header>
                <Content className="home-content">
                    <div
                        className="home-content-inner"
                        style={{
                            backgroundColor: token.colorBgBase,
                        }}
                    >
                        <Outlet />
                    </div>
                </Content>
                <Footer className="text-center">Ant Design ©{new Date().getFullYear()} Created by React18 Antd5</Footer>
            </Layout>
            <ThemeConfig open={open} onClose={() => setOpen(false)} />
        </Layout>
    );
};

export default Home;
